<template>
  <div class="video">
    <div class="title-wrapper">
      <span class='tag'>MV</span>
      <span class='title'>{{ songName || '当前音乐没有MV'}}</span>
      <span class='artist'>{{ singerName || ''}}</span>
    </div>
    <video :src="mvUrl || ''" controls></video>
  </div>
</template>

<script>
export default {
  data(){
    return{
      mvUrl:'',
      songName:'',
      singerName:'',
      toBack:''
    }
  },
  async created(){
    console.log(this.$route.params.mvid)
    if(this.$route.params.mvid !== '0'){
      // mv播放地址
      const mvbf = await this.$axios.get('/mv/url?id='+this.$route.params.mvid)
      if(mvbf.data !== undefined){
        this.mvUrl = mvbf.data.data.url
      }else{
        this.mvUrl = mvbf.url
      }
      // 歌名 歌手名
      const mvMsg = await this.$axios.get('/mv/detail?mvid='+this.$route.params.mvid)
      console.log(mvMsg)
      if(mvMsg.data !== undefined){
        this.songName = mvMsg.data.data.name
        this.singerName = mvMsg.data.data.artistName
      }else{
        this,songName = mvMsg.name
        this.singerName = mvMsg.artistName
      }
    }
  },
}
</script>

<style scoped>
@import '@/assets/css/video.css';
</style>